<template>
    <div class="setBox">
        <div class="left">
            <img :src="avatar" alt="">
            <ul>
                <li v-for="(item, index) in menuItems" :key="index" :class="{ 'active': selectIndex === index }"
                    @click="changeSet(index)">
                    <b> {{ item.name }}</b>
                </li>
                <li class="activebackground"> </li>
            </ul>
        </div>
        <div class="right">
            <component :is="menuItems[selectIndex].component" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import About from './sets/about.vue'
import Save from './sets/save.vue'
import History from './sets/history.vue'
import Other from './sets/other.vue'
import collection from './sets/collection.vue'
import avatar from '@renderer/assets/imgs/icon.png'

const selectIndex = ref(0)
const menuItems = [
    {
        name: '保存地址',
        component: Save
    },
    {
        name: '我的收藏',
        component: collection
    },
    {
        name: '历史记录',
        component: History
    },
    {
        name: '关于软件',
        component: About
    },
    {
        name: '其它设置',
        component: Other
    }
]

const changeSet = (index: number) => {
    selectIndex.value = index
}
</script>

<style scoped lang="scss">
.setBox {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: grid;
    grid-template-columns: 180px 1fr;

    .left {
        @include mixin.box_shadow();
        padding: 2px;
        text-align: center;

        img {
            width: 40%;
            border-radius: 50%;
            margin: 10px 0;
        }

        ul {
            position: relative;

            li {
                cursor: pointer;
                text-align: center;
                padding: 10px 0;
                transition: all 0.3s;

                &:hover {
                    color: $primary;
                }
            }

            .active {
                border-radius: $boxRadius;
                background-color: $selectBack;
                color: $primary;
            }
        }
    }

    .right {
        height: 100%;
        width: 100%;
        overflow: auto;
        @include mixin.scroll_bar();
    }
}
</style>